<template>
	<div class="edit app-container">
		<el-dialog :title="title" :visible.sync="show" fullscreen>

			<div class="content" v-loading="loading">
				<el-form ref="edit-form" :model="form" :rules="formRules" label-width="120px" label-position="right">
					<el-row>
						<el-col :span="24">
							<el-form-item label="商品名称:" prop="goodsName">
								<el-input v-model="form.goodsName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="商品分类:" prop="goodsType">
								<treeselect v-model="form.goodsType"
									:options="[{goodsTypeId:'',goodsTypeParentName:'请选择'},...dataTable]"
									:normalizer="normalizer" :show-count="true" placeholder="选择商品分类" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品分属:" prop="goodsBelong">
								<el-select v-model="form.goodsBelong" placeholder="请选择">
									<el-option label="餐饮" value="餐饮" />
									<el-option label="优选" value="优选" />
									<el-option label="酒店" value="酒店" />
									<el-option label="景点" value="景点" />
									<el-option label="财务" value="财务" />
									<el-option label="物业" value="物业" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							  <el-form-item label="商品属性:">
								<el-tag style="margin-right: 10px;" :key="tagIndex" v-for="(tag,tagIndex) in dynamicTags" closable :disable-transitions="false"
								  @close="handleClose(tag)">
								  {{tag}}
								</el-tag>
								<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
								  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
								</el-input>
								<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
							  </el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="销售价格:" prop="sellingPrice">
								<el-input v-model.number="form.sellingPrice"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="划线价格:" prop="crossedPrice">
								<el-input v-model.number="form.crossedPrice"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="最高库存量:" prop="maxInventory">
								<el-input v-model.number="form.maxInventory"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="报警库存量:" prop="minInventory">
								<el-input v-model.number="form.minInventory"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row :gutter="20" v-if="form.goodsBelong!='酒店'">
						<el-col :span="24">
							<el-form-item label="商品积分:" prop="commodityPoints">
								<el-input v-model.number="form.commodityPoints"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20">
						<el-col :span="12" v-if="form.goodsBelong!='酒店'">
							<el-form-item label="快递方式:" prop="expressDelivery">
								<el-radio-group v-model="form.expressDelivery">
									<el-radio label="0">快递</el-radio>
									<el-radio label="1">自提</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.goodsBelong!='酒店'">
							<el-form-item label="餐卡支付:" prop="mealCardPay">
								<el-radio-group v-model="form.mealCardPay">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20" v-if="form.goodsBelong!='酒店'">
						<el-col :span="12">
							<el-form-item label="是否包邮:" prop="ispost">
								<el-radio-group v-model="form.ispost">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>

							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="邮费:" prop="postage">
								<el-input v-model.number="form.postage" style="width: 200px;"></el-input>
								<!-- <span style="margin-left: 10px;">元</span> -->
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="20" v-if="form.goodsBelong!='酒店'">
						<el-col :span="12">
							<el-form-item label="首发新品:" prop="newProduct">
								<el-radio-group v-model="form.newProduct">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>

							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="精品推荐:" prop="recommendation">
								<el-radio-group v-model="form.recommendation">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row v-if="form.goodsBelong!='酒店'">
						<el-col :span="24">
							<el-form-item label="商品简介:" prop="productIntroduction">
								<el-input type="textarea" autosize v-model="form.productIntroduction"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="24">
							<el-form-item label="产品描述:" prop="productDescription">
								<quill-edit v-model="form.productDescription" :height="465"></quill-edit>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="12">
							<el-form-item label="商品图片:" prop="f1">
								<image-upload :isShowTip="false" v-model="form.f1" :limit="1"></image-upload>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="轮播图:" prop="filePaths">
								<image-upload :isShowTip="false" v-model="form.filePaths" :limit="99"></image-upload>
							</el-form-item>
						</el-col>
					</el-row>

				</el-form>
			</div>

			<div slot="footer">
				<el-button type="primary" @click="onSubmit" :loading="btnLoading">{{form.goodsId?'立即修改':'立即创建'}}
				</el-button>
				<el-button :disabled="btnLoading" @click="cancel">取消</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import QuillEdit from "@/components/Editor";
	import {
		goodsTypeList
	} from "@/api/shopping/column"
	import {
		goodsAdd,
		goodsDetail,
		goodsEdit
	} from "@/api/shopping/content"
	import Treeselect from "@riophae/vue-treeselect"
	import "@riophae/vue-treeselect/dist/vue-treeselect.css"
	export default {
		name: 'ContentEdit',
		components: {
			QuillEdit,
			Treeselect
		},
		data() {
			return {
				dynamicTags: [],
				inputValue: "",
				inputVisible:false,
				loading: false,
				dataTable: [],
				btnLoading: false,
				show: false,
				id: null,
				title: null,
				form: {},
				formRules: {
					goodsName: {
						required: true,
						message: "请输入商品名称",
						trigger: "blur"
					},
					goodsType: {
						required: true,
						message: "请选择商品分类",
						trigger: "blur"
					},
					goodsBelong: {
						required: true,
						message: "请选择商品分属",
						trigger: "blur"
					},
					standards: {
						required: true,
						message: "请输入规格单位",
						trigger: "blur"
					},

					sellingPrice: {
						required: true,
						message: "请输入销售价格",
						trigger: "blur"
					},
					expressDelivery: {
						required: true,
						message: "请选择快递方式",
						trigger: "blur"
					},
					mealCardPay: {
						required: true,
						message: "请选择餐卡支付",
						trigger: "blur"
					},
					ispost: {
						required: true,
						message: "请选择是否包邮",
						trigger: "blur"
					},
					f1: {
						required: true,
						message: "请选择上传商品图片",
						trigger: "blur"
					},
					commodityPoints:{
						required: false,
						message: "请输入商品积分",
						trigger: "blur"
					},
					minInventory:{
						required: true,
						message: "请输入报警库存",
						trigger: "blur"
					},
					maxInventory:{
						required: true,
						message: "请输入最高库存量",
						trigger: "blur"
					},
					productDescription:{
						required: true,
						message: "请输入产品描述",
						trigger: "blur"
					}
				}
			}
		},
		created() {
			goodsTypeList({}).then(response => {
				this.dataTable = this.handleTree(response.rows, 'goodsTypeId', 'goodsTypeParentid');
			})
		},
		methods: {
			init(options) {
				this.title = options.title
				this.form = {
					goodsName: '',
					goodsType: '',
					goodsBelong: '',
					standards: '',
					sellingPrice: '',
					crossedPrice: '',
					maxInventory: '',
					commodityPoints: '',
					minInventory: '',
					expressDelivery: '0',
					mealCardPay: '0',
					ispost: '0',
					postage: '',
					newProduct: '0',
					recommendation: '0',
					productIntroduction: '',
					productDescription: '',
					f1: '',
					f2: '',
					filePaths: ''
				};
				this.dynamicTags = [];
				this.inputValue = "";
				this.inputVisible = false;
				
				if (options && options.goodsId) {
					this.loading = true
					goodsDetail(options.goodsId).then(res => {
						for (let i in this.form) {
							this.form[i] = res.data[i]
						};
						this.form.filePaths = res.data.pubGoodsPics.map(item => {
							return item.picAddress;
						}).toString();
						this.form.goodsId = options.goodsId;
						if(this.form.f2) this.dynamicTags = this.form.f2.split(",");
						this.loading = false
					})
				} else {
					this.resetForm('edit-form')
				}
				this.show = true
			},
			showInput() {
			  this.inputVisible = true;
			  this.$nextTick(() => {
			    this.$refs.saveTagInput.$refs.input.focus();
			  });
			},
			handleInputConfirm() {
			  let inputValue = this.inputValue;
			  if (inputValue) {
			    this.dynamicTags.push(inputValue);
			  }
			  this.inputVisible = false;
			  this.inputValue = '';
			},
			normalizer(node) {
				if (node.children && !node.children.length) {
					delete node.children;
				}
				return {
					id: node.goodsTypeId,
					label: node.goodsTypeParentName,
					children: node.children
				};
			},
			cancel() {
				this.show = false
			},
			handleClose(tag) {
			  this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			onSubmit() {
				this.$refs['edit-form'].validate(valid => {
					if (!valid) return
					this.btnLoading = true;
					let form = JSON.parse(JSON.stringify(this.form));
					if(this.dynamicTags.length) form.f2 = this.dynamicTags.join(",");
					try{
						if (form.goodsId) {
							console.log('修改操作')
							goodsEdit(form).then(res => {
								this.btnLoading = false
								this.$message.success('操作成功')
								this.cancel();
								this.$emit("success");
							})
						} else {
							goodsAdd(form).then(res => {
								this.btnLoading = false
								this.$message.success('操作成功')
								this.cancel();
								this.$emit("success");
							})
						}						
					}catch(err){
						console.error("失败",err)
						this.btnLoading = false;
						this.cancel();
					}
				})

			}
		}
	}
</script>
<style lang="scss" scoped>
	.edit {
		.content {}
		.input-new-tag{
			width: 120px;
		}
	}
</style>
